/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/**
 * 新零售大屏数据
 *  */
import React, { useRef, useState, useEffect } from 'react';
import { Row, Col } from 'antd';
import { connect } from 'dva';
import { useFullscreen, useInterval } from 'ahooks';
import classnames from 'classnames';
import bg_big from '@/assets/bigScreen/bg_big.png';
import header from '@/assets/bigScreen/yzScreen/yzHeader.png';
import zoom_in from '@/assets/bigScreen/zoom_in.png';
import zoom_out from '@/assets/bigScreen/zoom_out.png';
import yzLogo from '@/assets/bigScreen/yzScreen/yzLogo.png';
import moment from 'moment';
import YzRealTimeArea from './components/YzRealTimeArea';
import YzYesterdayInNum from './components/YzYesterdayInNum';
import YzBrandsRate from './components/YzBrandsRate';
import SliderChart from './components/SliderChart';
import OutRateRange from './components/OutRateRange';
import InStorageNumber from './components/InStorageNumber';
import OutRate from './components/OutRate';
import styles from './index.less';
import { registerShape } from './components/_utils';

registerShape('round-rect');

function YzScreen({ dispatch, screenToken, screenLoginInfo = {} }) {
  const [title, setTitle] = useState(screenLoginInfo.shop_name);
  const [time, setTime] = useState('');
  const ref = useRef();
  const [isFullscreen, { toggleFull }] = useFullscreen(ref);

  useInterval(
    () => {
      setTime(moment().format('llll'));
    },
    1000,
    {
      immediate: true,
    },
  );

  useEffect(
    () => {
      if (screenToken) {
        dispatch({
          type: 'global/getScreenLoginInfo',
          payload: {
            token: screenToken,
          },
        }).then((res = {}) => {
          res.shop_name && setTitle(res.shop_name);
        });
      }
    },
    [dispatch, screenToken],
  );

  return (
    <div
      className={classnames(styles.main, {
        [styles.full]: isFullscreen,
      })}
      ref={ref}
    >
      <img src={bg_big} alt="" className={styles.main_img} />
      <img src={header} alt="" className={styles.main_bg_header} />
      <div className={styles.content}>
        <Row className={styles.header} type="flex" justify="space-between" align="middle">
          <Col span={6} className="logo">
            <Row type="flex" align="middle" justify="start">
              <Col>
                <img src={yzLogo} alt="logo" />
              </Col>
              <Col className={styles['right-header-text-yz']}>{title}</Col>
            </Row>
          </Col>
          <Col id="main-title-box" className={styles['main-title-box']} span={11}>
            <span id="main-title" className={styles['main-title']}>
              快宝智慧快递大数据中心
            </span>
          </Col>
          <Col span={6}>
            <Row type="flex" justify="end" align="middle" gutter={[10, 0]}>
              <Col className={styles['right-header-text']}>{time}</Col>
              <Col className={styles.zoom}>
                <img src={isFullscreen ? zoom_in : zoom_out} alt="" onClick={toggleFull} />
              </Col>
            </Row>
          </Col>
        </Row>
        <Row className={styles.body} style={{ flex: 1 }} type="flex">
          <Col span={6}>
            <Row
              className={styles['body-left']}
              gutter={[0, 20]}
              type="flex"
              justify="space-between"
            >
              <Col span={24} style={{ flex: 1 }}>
                <InStorageNumber type="in" isParentFull={isFullscreen} />
              </Col>
              <Col span={24} style={{ flex: 1 }}>
                <OutRate isParentFull={isFullscreen} />
              </Col>
              <Col span={24} style={{ flex: 1 }}>
                <InStorageNumber type="send" isParentFull={isFullscreen} />
              </Col>
            </Row>
          </Col>
          <Col span={12}>
            <Row
              className={styles['body-center']}
              gutter={[0, 20]}
              type="flex"
              justify="space-between"
            >
              <Col span={24}>
                <YzRealTimeArea />
              </Col>
              <Col span={24} style={{ flex: 1 }}>
                <SliderChart isParentFull={isFullscreen} />
              </Col>
            </Row>
          </Col>
          <Col span={6}>
            <Row
              className={styles['body-right']}
              gutter={[0, 20]}
              type="flex"
              justify="space-between"
            >
              <Col span={24} style={{ flex: 1 }}>
                <OutRateRange isParentFull={isFullscreen} />
              </Col>
              <Col span={24} style={{ flex: 1 }}>
                <YzBrandsRate title="昨日入库品牌占比" isPost={false} isParentFull={isFullscreen} />
              </Col>
              <Col span={24} style={{ flex: 1 }}>
                <YzYesterdayInNum isParentFull={isFullscreen} />
              </Col>
            </Row>
          </Col>
        </Row>
      </div>
    </div>
  );
}

export default connect(({ global }) => ({
  screenToken: global.screenToken,
  screenLoginInfo: global.screenLoginInfo,
}))(YzScreen);
